<template>
	<el-container>
		<el-aside :class="collapse?'coll':''" width="201px">
			<el-menu default-active="2" class="el-menu-vertical-demo" :collapse="collapse" background-color="#545c64"
				text-color="#fff" active-text-color="#ffd04b" unique-opened router :default-active="routeIf">
				<el-menu-item index="/index" @click.native="ClearHomePage">
					<i class="el-icon-menu"></i>
					<span slot="title">首页</span>
				</el-menu-item>
				<el-submenu :index="item.index" v-for="(item,index) in list">
					<template slot="title">
						<i class="el-icon-location"></i>
						<span>{{item.title}}</span>
					</template>
					<el-menu-item-group>
						<el-menu-item v-for="(ite,inx) in item.management" :index="ite.index">{{ite.title}}
						</el-menu-item>
					</el-menu-item-group>
				</el-submenu>
			</el-menu>
		</el-aside>
		<el-container>
			<el-header style="padding: 0px 0px;">
				<div class="indexTop">
					<div class="svg">
						<svg data-v-4e6f274c="" t="1492500959545" viewBox="0 0 1024 1024" version="1.1" @click="svg"
							:class="rotateBox?'rollback':'forward'" xmlns="http://www.w3.org/2000/svg" p-id="1691"
							xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64" class="hamburger">
							<path data-v-4e6f274c=""
								d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z"
								p-id="1692"></path>
							<path data-v-4e6f274c=""
								d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z"
								p-id="1693"></path>
							<path data-v-4e6f274c=""
								d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z"
								p-id="1694"></path>
						</svg>
						<div style="margin-left: 10px;">
							<el-breadcrumb separator="/">
								<el-breadcrumb-item :to="{ path: '/index' }" @click.native="ClearHomePage">首页
								</el-breadcrumb-item>
								<el-breadcrumb-item v-for="(item,index) in obtain">
									{{item.name}}
								</el-breadcrumb-item>
							</el-breadcrumb>
						</div>
					</div>
					<div class="el-icon">
						<el-tooltip class="item" effect="dark" content="全屏" placement="bottom-start">
							<el-button>
								<div><i class="el-icon-full-screen"></i></div>
							</el-button>
						</el-tooltip>
						<el-tooltip class="item" effect="dark" content="中/英文切换" placement="bottom-start">
							<el-button>
								<div><i class="el-icon-rank"></i></div>
							</el-button>
						</el-tooltip>

						<el-tooltip class="item" effect="dark" content="消息提示" placement="bottom-start">
							<el-button>
								<div><i class="el-icon-bell"></i></div>
							</el-button>
						</el-tooltip>
						<div><img src="../assets/1.gif"
								style="width: 50px; height: 48px; border-radius: 10px;vertical-align: bottom;">
						</div>
						<el-dropdown>
							<span class="el-dropdown-link">
								<i class="el-icon-arrow-down el-icon--right el-icon-caret-bottom"></i>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item>首页</el-dropdown-item>
								<el-dropdown-item>密码修改</el-dropdown-item>
								<el-dropdown-item @click.native="signOut">退出</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
				</div>
				<div class="app">
					<div v-for="item,index in preservation" @contextmenu.prevent="show"
						:class="routeIf==item.path?'linkage':''">
						<span>{{item.name}}</span>
						<span class="el-icon-close" @click.stop="deleteCurrent(index)"></span>
						<ul v-show="HideShow">
							<li>1</li>
							<li>1</li>
							<li>1</li>
						</ul>
					</div>
				</div>
			</el-header>
			<el-main style="margin-top: 20px;">
				<router-view />
			</el-main>
		</el-container>
	</el-container>
</template>

el-menu-vertical-demo el-menu
<script>
	export default {
		data() {
			return {
				routeIf: '',
				HideShow: false,
				collapse: false,
				rotateBox: false,
				preservation: [], //保存
				obtain: [], //获取 
				list: [{
						title: "用户管理", //user management
						index: "1",
						management: [{
								title: "会员管理",
								index: "/UserManagement/MultiplexRouting"
							},
							{
								title: "收货地址",
								index: "/UserManagement/MultiplexRouting"
							},
							{
								title: "会员收藏",
								index: "/UserManagement/MultiplexRouting"
							},
							{
								title: "会员足迹",
								index: "/UserManagement/MultiplexRouting"
							},
							{
								title: "搜索历史",
								index: "/UserManagement/MultiplexRouting"
							},
							{
								title: "意见反馈",
								index: "/UserManagement/MultiplexRouting"
							}
						]
					},
					{
						title: "商场管理", //Mall management
						index: "2",
						management: [{
								title: "行政区域",
								index: "/MallManagement/MultiplexRouting"
							},
							{
								title: "名牌制造商",
								index: "/MallManagement/MultiplexRouting"
							},
							{
								title: "商品类目", //111
								index: "/MallManagement/CommodityCategory"
							},
							{
								title: "订单管理", //111
								index: "/MallManagement/OrderManagement"
							},
							{
								title: "售后管理",
								index: "/MallManagement/MultiplexRouting"
							},
							{
								title: "通用问题",
								index: "/MallManagement/MultiplexRouting"
							},
							{
								title: "关键词",
								index: "/MallManagement/MultiplexRouting"
							}
						]
					},
					{
						title: "商品管理", //Commodity management
						index: "3",
						management: [{
								title: "商品列表", //111
								index: "/CommodityManagement/ProductList"
							},
							{
								title: "商品上架",
								index: "/CommodityManagement/MultiplexRouting"
							},
							{
								title: "商品评论", //111
								index: "/CommodityManagement/CommodityReview"
							}
						]
					},
					{
						title: "推广管理", //Promotion management
						index: "4",
						management: [{
								title: "广告管理", //111
								index: "/PromotionManagement/AdvertisingManagement"
							},
							{
								title: "优惠券管理", //111
								index: "/PromotionManagement/CouponManagement"
							},
							{
								title: "专题管理", //111
								index: "/PromotionManagement/ThematicManagement"
							},
							{
								title: "团购规则",
								index: "/PromotionManagement/MultiplexRouting"
							},
							{
								title: "团购活动",
								index: "/PromotionManagement/MultiplexRouting"
							}
						]
					},
					{
						title: "系统管理", //system management
						index: "5",
						management: [{
								title: "管理员", //111
								index: "/SystemManagement/Administrators"
							},
							{
								title: "通知管理", //111
								index: "/SystemManagement/NotificatioManagement"
							},
							{
								title: "操作日志",
								index: "/SystemManagement/MultiplexRouting"
							},
							{
								title: "角色管理",
								index: "/SystemManagement/RoleManagement" //111
							},
							{
								title: "对象存储",
								index: "/SystemManagement/MultiplexRouting"
							}
						]
					},
					{
						title: "配置管理", //configuration management
						index: "6",
						management: [{
								title: "商场配置",
								index: "/ConfigurationManagement/MultiplexRouting"
							},
							{
								title: "运费配置",
								index: "/ConfigurationManagement/MultiplexRouting"
							},
							{
								title: "订单配置",
								index: "/ConfigurationManagement/MultiplexRouting"
							},
							{
								title: "小程序配置",
								index: "/ConfigurationManagement/MultiplexRouting"
							}
						]
					},
					{
						title: "统计报表", //Statistical report
						index: "7",
						management: [{
								title: "用户统计",
								index: "/StatisticalReport/MultiplexRouting"
							},
							{
								title: "订单统计",
								index: "/StatisticalReport/MultiplexRouting"
							},
							{
								title: "商品统计",
								index: "/StatisticalReport/MultiplexRouting"
							}
						]
					},
					{
						title: "外链", //Outer chain
						index: "8",
						management: [{
								title: "腾讯云存储",
								index: "/OuterChain/MultiplexRouting"
							},
							{
								title: "腾讯云短信",
								index: "/OuterChain/MultiplexRouting"
							},
							{
								title: "微信支付",
								index: "/OuterChain/MultiplexRouting"
							},
							{
								title: "小程序客服",
								index: "/OuterChain/MultiplexRouting"
							},
							{
								title: "阿里云存储",
								index: "/OuterChain/MultiplexRouting"
							},
							{
								title: "七牛云存储",
								index: "/OuterChain/MultiplexRouting"
							},
							{
								title: "快递鸟",
								index: "/OuterChain/MultiplexRouting"
							}
						]
					}
				],
			}
		},
		watch: {
			$route(to, from) {
				// console.log(to.matched);
				this.obtain = to.matched
				// console.log(to.name);
				this.preservation.push(to)

				//去重
				let duplicateRemoval = {};
				this.preservation = this.preservation.reduce((cur, next) => {
					duplicateRemoval[next.path] ? "" : duplicateRemoval[next.path] = true && cur.push(next);
					return cur;
				}, [])
				this.routeIf = to.path
			}
		},
		methods: {
			show() {
				console.log(11111)
			},


			//菜单缩放和图片动画
			svg() {
				if (this.collapse == true) {
					this.collapse = false
				} else {
					this.collapse = true
				}
				this.rotateBox = !this.rotateBox
			},

			//数组清空
			ClearHomePage() {
				// console.log(132)
				this.obtain = []
			},

			//点击跳到登录页面
			signOut() {
				this.$router.push({
					path: "/"
				})
			},

			//点击关闭当前
			deleteCurrent(index) {
				// console.log(index,99999)
				this.preservation.splice(index, 1)
			}
		},
	}
</script>



<style lang="less">
	.el-container {
		height: 100%;
		width: 100%;
	}

	.el-menu-vertical-demo {
		height: 100% !important;
		background-color: #304156;
	}

	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 200px;
	}


	.el-aside {
		transition: all 0.5s;
	}

	.coll {
		width: 64px !important;
	}

	.svg {
		height: 20px;
		display: flex;
		align-items: center;

		.hamburger {
			width: 20px;
			height: 20px;
		}
	}

	.rollback {
		transform: rotate(-90deg);
	}

	.rollback {
		transform: rotate(90deg);
	}


	.indexTop {
		height: 50px;
		display: flex;
		align-items: center;
		display: flex !important;
		justify-content: space-between;
		border-bottom: 1px solid #ccc;

		.el-icon {
			display: flex;
			align-items: center;

			.item {
				margin: 4px;
				margin-right: 15px;
				font-size: 20px;

				.el-button {
					width: 40px;
					height: 40px;
				}
			}

		}

	}

	.el-dropdown-link {
		cursor: pointer;
		color: #409EFF;

		.el-icon-arrow-down {
			font-size: 20px;
		}
	}

	.app {
		height: 35px;
		display: flex;
		width: 100%;
		border-bottom: 3px solid #e1e1e1;

		.linkage {
			background-color: #FFD04B;
		}

		div {
			border: 1px solid #f3f3f3;
			height: 30px;
			line-height: 30px;
			margin-left: 10px;
			padding: 0px 10px;

			.el-icon-close {
				font-size: 12px;
				margin-left: 5px;
			}
		}
	}
</style>
